<template>
	<view>
		<u-sticky bgColor="#fff">
			<view style="display: flex;justify-content: space-between;">
				<view style="width: 25%;">
					<u-picker :show="show" :columns="columns" @cancel="cancel" @confirm="confirm"></u-picker>
					<u-button @click="show = true">{{searchType}}></u-button>
				</view>
				<view style="width: 70%;display: flex;align-items: center;justify-content: center;padding: 0 20rpx;">
					<u-search border-color="#efefef" search-icon-color="#1296db" placeholder="关键词"
					v-model="keyword" @search="search" @custom="search" :clearabled="true"></u-search>
				</view>
			</view>
		</u-sticky>
		
		<view style="margin: 0 20rpx;">
			<view v-for="(item,index) in resultList" :key="index" @click="cardClick(item.id,item.tags)"
				style="border-radius: 20rpx;display: flex;justify-content: center;margin-bottom: 20rpx;padding: 14rpx;background-color: #fff;">
				<view style="width: 260rpx;height: 190rpx;border-radius: 20rpx;overflow: hidden;">
					<image style="width: 100%;height: 100%;" :src="imgOne(item.pic,item.tags)" mode="aspectFill">
					</image>
				</view>
				<view style="width: 100%;margin-left: 20rpx;display: flex;flex-direction: column;">
					<view style="font-size: 28rpx;margin-bottom: 12rpx;">
						{{item.title}}
					</view>
					<view
						style="margin-bottom: 12rpx;font-size: 26rpx;color: #909399;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">
						{{item.tags == '社会资讯' ? delTag(item.content) : item.content}}
					</view>
					<view style="align-self: flex-start;margin-bottom: 12rpx;">
						<text v-if="item.tags == '求职'" class="etcString"
							style="background-color: #20C3FE;">{{item.etcString}}</text>
						<text v-if="item.tags == '招聘'" class="etcString"
							style="background-color: #F9AE3D;">{{item.etcString}}</text>
						<text v-if="item.tags == '房屋'" class="etcString"
							style="background-color: #5AC725;">{{item.etcString}}</text>
						<text v-if="item.tags == '推荐店铺'" class="etcString"
							style="background-color: #FF226B;">{{item.address}}</text>
						<text v-if="item.tags == '社会资讯'" class="etcString"
							style="background-color: #DD27DE;">{{item.address}}</text>
						<text v-if="item.tags == '周末游'" class="etcString"
							style="background-color: #B1CA79;">{{item.address}}</text>
					</view>
					<view style="display: flex;justify-content: flex-end;">
						<view style="margin-left: 10rpx;font-size: 22rpx;color: #909399;">{{item.createTime}}</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#20C3FE" name="eye"></u-icon>
							<text>{{item.lookNum}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#ff5500" name="thumb-up"></u-icon>
							<text>{{item.up==null||item.up == ''?'0':item.up}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon name="star" color="#ffaa00"></u-icon>
							<text>{{item.collect}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {searchSociety,searchStore,searchJobHunt,searchRecruit,searchWeekendTour} from '../../config/api.js'
	import {mapGetters} from 'vuex'
	// const baseUrl = 'http://localhost:8080'
	export default {
		data() {
			return {
				keyword:'',
				searchType:'社会资讯',
				show: false,
				columns: [
					['社会资讯', '推荐店铺', '求职','招聘','周末游']
				],
				resultList:[],
				isNull:false
			}
		},
		computed: {
				...mapGetters(['getBaseUrl']),
		},
		onLoad() {
			this.search()
		},
		methods: {
			// 查询
			search(){
				if(this.searchType=='社会资讯'){
					searchSociety({newContent:this.keyword}).then(res=>{
						if(res.data.data.length==0){
							this.isNull=true
							this.resultList = []
							return
						}
						this.isNull=false
						this.resultList = res.data.data.map(item =>{
							return {
								id: item.id,
								title: item.title,
								content: item.description,
								pic: item.pic,
								lookNum: item.lookNum,
								up: item.up,
								collect: item.collect,
								createTime: item.createTime,
								tags:item.updateBy,
								address:item.address
							}
						})
					
					})
				}else if(this.searchType=='推荐店铺'){
					searchStore({storeIntroduction:this.keyword}).then(res=>{
						if(res.data.data.length==0){
							this.isNull=true
							this.resultList = []
							return
						}
						this.isNull=false
						this.resultList = res.data.data.map(item =>{
							return {
								id: item.id,
								title: item.title,
								content: item.description,
								pic: item.pic,
								lookNum: item.lookNum,
								up: item.up,
								collect: item.collect,
								createTime: item.createTime,
								tags:item.updateBy,
								address:item.address
							}
						})
					})
				}else if(this.searchType=='求职'){
					searchJobHunt({workExperience:this.keyword}).then(res=>{
						if(res.data.data.length==0){
							this.isNull=true
							this.resultList = []
							return
						}
						this.isNull=false
						this.resultList = res.data.data.map(item =>{
						return {
							id: item.id,
							title: item.title,
							content: item.description,
							pic: item.pic,
							lookNum: item.lookNum,
							up: item.up,
							collect: item.collect,
							createTime: item.createTime,
							tags:item.updateBy,
							etcString:item.etcString
						}
					})
					})
				}else if(this.searchType=='招聘'){
					searchRecruit({workLocation:this.keyword}).then(res=>{
						if(res.data.data.length==0){
							this.isNull=true
							this.resultList = []
							return
						}
						this.isNull=false
						this.resultList =res.data.data.map(item =>{
						return {
							id: item.id,
							title: item.title,
							content: item.description,
							pic: item.pic,
							lookNum: item.lookNum,
							up: item.up,
							collect: item.collect,
							createTime: item.createTime,
							tags:item.updateBy,
							etcString:item.etcString
						}
					})
					})
				}else if(this.searchType=='周末游'){
					searchWeekendTour({title:this.keyword}).then(res=>{
						if(res.data.data.length==0){
							this.isNull=true
							this.resultList = []
							return
						}
						this.isNull=false
						this.resultList = res.data.data.map(item =>{
						return {
							id: item.id,
							title: item.title,
							content: item.description,
							pic: item.pic,
							lookNum: item.lookNum,
							up: item.up,
							collect: item.collect,
							createTime: item.createTime,
							tags:item.updateBy,
							address:item.address
						}
					})
					})
				}
			},
			// 类型选择 取消
			cancel(){
				this.show=false
			},
			// 类型选择 确定
			confirm(e){
				this.show=false
				this.searchType=this.columns[0][e.indexs[0]]
				this.search()
			},
			// 取卡片对象的第一张图片
			imgOne(pic,tags) {
				if(pic == null ||pic == ''){
					
					if(tags=='求职'){
						return '/static/standbyLogo/zhao_logo.jpg'
					}else
					if(tags == '招聘'){
						return '/static/standbyLogo/pin_logo.png'
					}else
					if(tags == '房屋'){
						return '/static/standbyLogo/house_logo.png'
					}else
					if(tags == '推荐店铺'){
						return '/static/standbyLogo/store_logo.png'
					}else
					if(tags == '社会资讯'){
						return '/static/standbyLogo/zixun_logo.png'
					}else
					if(tags == '周末游'){
						return '/static/standbyLogo/week-logo.png'
					}
					
				}else{
					let src = pic.split(",")[0];
					return this.getBaseUrl + src
				}
				
			},
			// 移除HTML标签
			delTag(str) {
				return str.replace(/<[^>]+>/g, "");
			},
			// 点击卡片
			cardClick(id,tag) {
				if(tag=='求职'){
					uni.navigateTo({
						url: `/pages/recruit/jobHuntDetail?id=${id}`
					})
				}else if(tag == '招聘'){
					uni.navigateTo({
						url: `/pages/recruit/recruitDetail?id=${id}`
					})
				}else if(tag == '房屋'){
					uni.navigateTo({
						url: `/pages/house/house?id=${id}`
					})
				}else if(tag == '推荐店铺'){
					uni.navigateTo({
						url: `/pages/shop/shopDetail?id=${id}`
					})
				}else if(tag == '社会资讯'){
					uni.navigateTo({
						url: `/pages/society/society?id=${id}`
					})
				}else if(tag == '周末游'){
					uni.navigateTo({
						url: `/pages/weekendTour/weekendTour?id=${id}`
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">

	.etcString {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 22rpx;
		border-radius: 10rpx;
		line-height: 40rpx;
		padding: 8rpx;
		color: #fff;
	}
</style>
